<template>
  <Financial
    title="发票管理"
    add-btn-text="新增发票"
    :columns="columns"
    :get-page-url="Api.invoicePage"
    :cud-url="Api.invoice"
    create-title="新增发票"
    update-title="编辑发票"
    delete-message="确认删除该发票吗？"
    :model="model"
    :model-form-setting="modelFormSetting"
    review-api-key="invoiceReview"
    nullify-api-key="invoiceNullify"
    :detail-modal-options="detailModalOptions"
    @before-update-model="beforeUpdateModel"
    @before-ok="beforeOk"
    @show-detail="showDetail"
  >
    <template #detailCenter>
      <div class="mt-4 text-center">
        <a-image
          :src="detailModalOptions.data.invoiceUrl"
          :height="400"
          class="!h-full !w-auto"
          :fallback="DEFAULT_IMG_BASE64_STR"
        ></a-image>
      </div>
    </template>
  </Financial>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Financial from "/@/views/common/Financial/Financial.vue";
import { TableColumnProps } from "ant-design-vue";
import { Api } from "/@/api/main/financial";
import { DetailModalOptions, FinancialItem, InvoiceType } from "/@/api/main/financial/models";
import { CURDAction, CURDModalEvent, FormItemComponentType, FormItemData } from "/@/components/CURDDialog/models";
import { enumToOptions, getLabelByValueFromEnum } from "/@/utils/common";
import { getSupplierList } from "/@/api/main/pis";
import dayjs from "dayjs";
import { ReceiptStatus } from "/@/api/main/pis/models";
import { SelectOptionItem } from "/@/types/antd";
import { DEFAULT_IMG_BASE64_STR } from "/@/utils/file";
import { useInvoice } from "./useInvoice";

const { columns } = useInvoice();

const model = ref<Partial<FinancialItem>>({
  invoiceNum: "",
  invoiceUrl: "",
  _invoicingDate: null,
  invoiceType: InvoiceType.normal,
  invoiceCode: "",
  supplierId: null,
  invoiceAmount: null,
  remark: "",
});

const modelFormSetting = ref<FormItemData<Partial<FinancialItem>>[]>([
  {
    key: "invoiceNum",
    required: true,
  },
  {
    key: "invoiceUrl",
    type: FormItemComponentType.IMGUPLOAD,
    required: true,
  },
  {
    key: "_invoicingDate",
    label: "开票日期",
    type: FormItemComponentType.DATEPICKER,
    required: true,
    props: {
      valueFormat: null,
    },
  },
  {
    key: "invoiceType",
    type: FormItemComponentType.SELECT,
    required: true,
    props: {
      options: enumToOptions(InvoiceType, "invoiceType"),
    },
  },
  {
    key: "invoiceCode",
    required: true,
  },
  {
    key: "supplierId",
    label: "供应商",
    type: FormItemComponentType.SELECT,
    props: {
      options: [],
    },
    async getData() {
      const data = await getSupplierList();
      return data
        ? data.map((item) => ({
            label: item.name,
            value: item.id,
            key: item.id,
          }))
        : [];
    },
    required: true,
  },
  {
    key: "invoiceAmount",
    type: FormItemComponentType.NUMBER,
    required: true,
  },
  {
    key: "remark",
    label: "备注",
    type: FormItemComponentType.TEXTAREA,
  },
]);

function beforeUpdateModel(record: FinancialItem) {
  record._invoicingDate = dayjs(record.invoicingDate);
}

function beforeOk({ action, model }: CURDModalEvent<Partial<FinancialItem>>) {
  if (model) {
    model.invoicingDate = model._invoicingDate?.valueOf() as number;
    delete model._invoicingDate;

    if (action === CURDAction.CREATE) {
      model.status = ReceiptStatus.waiting;
    }
  }
}
/**
 *
 */
const detailModalOptions = ref<DetailModalOptions>({
  triggerKeys: ["invoiceNum"],
  title: "发票详情",
  desKeys: ["invoiceNum", "invoicingDate", "invoiceType", "invoiceCode", "supplierId", "invoiceAmount"],
  loading: false,
  data: {},
});
function showDetail(record: FinancialItem) {
  detailModalOptions.value.data = record;
}
</script>
